<template>
	<view class="page">
		<navbar backIconName="arrow-left" title="我的入企码" bgColor="transparent" :titleStyle="titleStyle"></navbar>

		<scroll-view class="scroll-view_H" scroll-y="true">
			<view class="top">
				<image mode="widthFix" style="width: 100%;display: block;" src="@/static/home/top-bg.jpg"></image>
				<view class="title-content">
					<text style="font-size: 32rpx;font-weight: bold;">河南省优化营商环境</text>
					<text style="font-size: 38rpx;font-weight: bold;margin-bottom: 30rpx;">入企监测平台</text>
					<view class="bt">
						<text>河南省发展和改革委员会</text>
						<text style="letter-spacing: 12rpx;">河南省司法厅</text>
					</view>
				</view>
			</view>
			<!-- 码 -->
			<view class="QrCode">
				<view style="width: 100%;margin-top: 80rpx;display: flex;justify-content: center;">
					<QiyanQrcode ref="myQrCode" :text="qrCodeUrl" :size="qrCodeWidth" :foreground="qrCodeColor"
						id="qrcode1"></QiyanQrcode>
				</view>
				<view style="display: flex;align-items: center;margin-top: 40rpx;">
					<text
						style="font-size: 38rpx;color: #1153B5;font-weight: bold;">{{userInfo.fontUser.userName || '-'}}</text>
				</view>
				<view style="display: flex;align-items: center;margin-top: 20rpx;">
					<text style="font-size: 28rpx;color: #8c8c8c;">{{userInfo.departmentName || '-'}}</text>
				</view>
				<view style="display: flex;align-items: center;margin-top: 20rpx;">
					<text
						style="font-size: 30rpx;color: #fff;background-color: #AA753E;padding: 14rpx 30rpx;border-radius: 10rpx;">{{(!userInfo.isEnterprise)?'企业用户':(userInfo.isEnterprise && userInfo.lawEnforcementOfficials)?'执法人员':(userInfo.isEnterprise && !userInfo.lawEnforcementOfficials)?'普通入企人员':''}}</text>
				</view>
				<view v-if="false"
					style="display: flex;align-items: center;margin-top: 40rpx;background-color: #1153b5;padding: 14rpx 30rpx;color: #fff; border-radius: 10rpx;">
					<text style="font-size: 30rpx;padding-right: 8px;">查看电子执法证</text>
					<u-icon name="eye" color="#fff" size="20"></u-icon>
				</view>

			</view>

		</scroll-view>

	</view>
</template>

<script>
	import QiyanQrcode from "@/components/qiyan-qrcode/qiyan-qrcode.vue"
	import store from '@/store'
	let App = getApp();
	export default {
		components: {
			QiyanQrcode,
		},
		data() {
			return {
				qrCodeWidth: App.globalData.screenWidth - 120,
				titleStyle: {
					color: "#ffffff",
					fontWeight: "bold",
					fontSize: "18px"
				},
				companyName: "",
				userInfo: store.state.user.USER_INFO,
				userId: store.state.user.USER_OPENID,
				qrCodeUrl: "",
				qrCodeColor: "#000000",
			};
		},
		onLoad() {
			this.getQrCode()
		},
		methods: {
			getQrCode() {
				this.qrCodeUrl = '?userId=' + store.state.user.USER_OPENID
			},
		}
	};
</script>

<style lang="scss" scoped>
	.list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.dial-nav {
		padding: 24rpx 30rpx 30rpx 30rpx;
	}

	.scroll-view_H {
		width: 100%;
		height: 100%;

		.QrCode {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.top {
			width: 100%;
			display: flex;
			position: relative;
			color: #fff;

			.title-content {
				width: 100%;
				display: flex;
				align-items: center;
				flex-direction: column;
				position: absolute;
				bottom: 40rpx;
				text-align: center;

				.bt {
					width: 420rpx;
					padding: 10rpx 0rpx;
					display: flex;
					flex-direction: column;
					font-size: 24rpx;
					background-color: #05306D;
					opacity: .6;
					border-radius: 50rpx;
				}


			}

		}


	}
</style>